<template>
  <div id="hrv-chart" v-if="state.hrvVisible" class="hrv-chart">
    <div class="title-div">
      <span class="title">HRV、情绪压力图（点击柱状图查看报告）</span>
    </div>
  </div>
  <DynamicDialog ref="dynamicDialogRef" @click="callBack" :button="{confirm:false}"
                 :dialogVisible="state.visible"
                 title="HRV报告" width="80%">
    <template #dialog>
      <HrvReport ref="hrvReportRef" v-if="state.visible" :hrvData="state.hrvData"/>
    </template>
  </DynamicDialog>
</template>

<script lang="tsx" setup>
import {defineProps, onMounted, nextTick, reactive, ref, watch} from 'vue';
import * as echarts from 'echarts';

import DynamicDialog from '@/components/layout/dialog/dynamic-dialog.vue';
import HrvReport from './report/Index.vue'

const dynamicDialogRef = ref(DynamicDialog)
const hrvReportRef = ref(HrvReport)

const state = reactive({
  visible: false,
  hrvVisible: false,
  hrvData: {} as any,
  myChart: null as any
});

const props = defineProps({
  chartData: {
    type: Array,
    default: () => [],
  },
  refresh: {
    type: Number,
    default: 0
  }
});
onMounted(() => {
  state.hrvData = props.chartData
  const chartDom = document.getElementById('hrv-chart')!;
  state.myChart = echarts.init(chartDom);
  state.myChart.on('click', longReport)
  nextTick(() => {
    init(false);
  })
});

const callBack = (data: any) => {
  switch (data.type || '') {
    case 'dialogClose':
      state.visible = false
      break
    default:
      break
  }
}
watch(
    () => [props.refresh, props.chartData],
    (newValue, oldValue) => {
      console.log('hrvRefresh', oldValue, newValue)
      state.hrvVisible = false
      if (newValue[0]) {
        state.hrvData = newValue[0]
      }
      nextTick(() => {
        init(true);
      })
    }
);

/**
 * 初始化函数
 * */
const init = async (heavy: boolean) => {
  // HRV内容
  let hrv = [] as any, stress = [] as any, data = [] as any
  state.hrvData?.forEach((e: any) => {
    if (data.indexOf(e.time) === -1) {
      data.push(e.time)
    }
    if (e.name == 'HRV') {
      hrv.push(e.value)
    } else {
      stress.push(e.value)
    }
  })
  console.log('state.hrvData', {hrv, stress, data})

  let option = {
    title: {
      text: 'HRV、情绪压力图',
      subtext: '点击柱状图查看报告'
    },
    tooltip: {
      trigger: 'axis'
    },
    legend: {
      data: ['HRV', '情绪压力']
    },
    toolbox: {
      show: true,
    },
    calculable: true,
    xAxis: [
      {
        type: 'category',
        data: data
      }
    ],
    yAxis: [
      {
        type: 'value'
      }
    ],
    series: [
      {
        name: 'HRV',
        type: 'bar',
        barMaxWidth: 20,
        data: hrv,
      },
      {
        name: '情绪压力',
        type: 'bar',
        barMaxWidth: 20,
        data: stress,
      }
    ]
  };
  console.log('option', option)
  if (heavy) {
    state.myChart.setOption(option, heavy)
  } else {
    state.myChart.setOption(option)
  }
  state.hrvVisible = true
};

const longReport = async (longReport: any) => {
  const {name, data, dataIndex, seriesName} = longReport
  console.log('longReport2', {name, data, dataIndex, seriesName})
  const hrvList = props.chartData?.filter((f: any) => f.name.toLowerCase() === 'hrv' && f.time === name)
  state.hrvData = hrvList[0]
  console.log('longReport2', state.hrvData)
  state.visible = true
};
</script>
